<template>
  <div class="default-main ba-table-box page">
    <!-- 按钮与搜索 -->
    <el-row class="page-button">
      <el-button type="primary" @click="save()">新增</el-button>
      <el-button type="success" @click="loadTableData()">刷新</el-button>
      <el-input style="width: 20%; margin: 0 0 0 auto" v-model="searchText" placeholder="搜索" :suffix-icon="Search"
        @keyup.enter="handleSearch" clearable />
    </el-row>

    <!-- 表格 -->
    <el-table :data="page.list" stripe border v-loading="tableLoading">
      <el-table-column fixed type="index" label="序号" width="100" align="center" />
      <el-table-column show-overflow-tooltip prop="bankName" label="银行名称" align="center" />
      <el-table-column show-overflow-tooltip prop="mode" label="接口类型" align="center" sortable>
        <template #default="scope">
          <span v-if="scope.row.mode === 0">不做任何控制</span>
          <span v-else-if="scope.row.mode === 1">只控制查询</span>
          <span v-else-if="scope.row.mode === 2">只控制交易</span>
          <span v-else-if="scope.row.mode === 3">查询、交易，分开控制</span>
          <span v-else-if="scope.row.mode === 4">查询、交易，合并控制</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="queryDelayTime" label="查询延迟时间" align="center" />
      <el-table-column show-overflow-tooltip prop="queryWaitingTime" label="查询超时时间" align="center" />
      <el-table-column show-overflow-tooltip prop="tradeDelayTime" label="交易延迟时间" align="center" />
      <el-table-column show-overflow-tooltip prop="tradeWaitingTime" label="交易超时时间" align="center" />
      <el-table-column show-overflow-tooltip prop="interval" label="查询和交易的间隔" align="center">
        <template #default="scope">
          <span v-if="scope.row.interval === 0">关闭</span>
          <span v-else-if="scope.row.interval === 1">开启</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip fixed="right" label="操作" align="center" width="150">
        <template #default="scope">
          <el-button width="50" link type="warning" size="small" @click="edit(scope.row)">
            编辑
          </el-button>
          <el-popconfirm title="是否删除当前配置?" @confirm="del(scope.row)">
            <template #reference>
              <el-button width="50" link type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination style="margin-top: 16px" v-model:current-page="page.current" v-model:page-size="page.limit"
      :page-sizes="[5, 10, 20, 50]" :small="small" :disabled="disabled" :background="background"
      layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
      @current-change="onTableCurrentChange" />

    <!-- 编辑弹窗 -->
    <el-dialog v-if="dialogVisible" v-model="dialogVisible" title="编辑" width="800px" @close="emptyData()">
      <el-form ref="formRef" :model="formData" label-width="180px" class="demo-dynamic">
        <el-form-item label="银行名称">
          <el-select v-model="formData.bankName" clearable filterable placeholder="银行名称">
            <el-option v-for="item in bankCodeList" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="选择模式">
          <el-select v-model="formData.mode" clearable filterable placeholder="选择模式" @change="findInterfaceName()">
            <el-option v-for="item in modeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="查询间隔的模式">
          <el-radio-group v-model="formData.queryInterval" class="ml-4">
            <el-radio :label="0" size="large">固定模式</el-radio>
            <el-radio :label="1" size="large">动态模式</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="查询间隔时间">
          <el-input-number v-model="formData.queryDelayTime" :precision="0" :step="100" :min="0">
            <template #append>毫秒</template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="查询超时的最大时间">
          <el-input-number v-model="formData.queryWaitingTime" :precision="0" :step="100" :min="0">
            <template #append>毫秒</template>
          </el-input-number>
        </el-form-item>

        <el-form-item label="交易间隔的模式">
          <el-radio-group v-model="formData.tradeInterval" class="ml-4">
            <el-radio :label="0" size="large">固定模式</el-radio>
            <el-radio :label="1" size="large">动态模式</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="交易间隔时间">
          <el-input-number v-model="formData.tradeDelayTime" :precision="0" :step="100" :min="0">
            <template #append>毫秒</template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="交易超时的最大时间">
          <el-input-number v-model="formData.tradeWaitingTime" :precision="0" :step="100" :min="0">
            <template #append>毫秒</template>
          </el-input-number>
        </el-form-item>

        <el-form-item label="查询和交易的间隔">
          <el-radio-group v-model="formData.interval" class="ml-4">
            <el-radio :label="0" size="large">关闭</el-radio>
            <el-radio :label="1" size="large">开启</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="间隔时间">
          <el-input-number v-model="formData.intervalTime" :precision="0" :step="100" :min="0">
            <template #append>毫秒</template>
          </el-input-number>
        </el-form-item>

      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submit()">确认</el-button>
          <el-button @click="emptyData()">取消</el-button>
        </span>
      </template>
    </el-dialog>


  </div>
</template>
<script setup>
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { ref, reactive, onMounted } from "vue";

const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const dialogVisible = ref(false);
const tableLoading = ref(false);
const searchText = ref("");
const page = reactive({
  current: 1,
  limit: 10,
  total: 0,
  list: [],
});

const formData = reactive({
  id: "",
  bankName: "",
  mode: "",

  queryInterval: 0,
  queryDelayTime: 0,
  queryWaitingTime: 0,

  tradeInterval: 0,
  tradeDelayTime: 0,
  tradeWaitingTime: 0,

  interval: 0,
  intervalTime: 0,
});


const modeList = ref([
  {
    value: 0,
    label: '不启用',
  },
  {
    value: 1,
    label: '只控制查询',
  },
  {
    value: 2,
    label: '只控制交易',
  },
  {
    value: 3,
    label: '查询、交易分开控制',
  },
  {
    value: 4,
    label: '查询、交易同时控制',
  },
])

// 获取银行类型
let bankCodeList = ref(["银行类型"])

const findInterfaceName = () => {

}
// 删除
const del = (row) => {
  request({
    url: "/bank/config/delete/" + row.id,
    method: "delete"
  }).then((res) => {
    if (res.status === 200) {
      ElMessage({
        message: '设置成功.',
        type: 'success',
      })
    }
    loadTableData();
  })
};

// 编辑
const edit = (row) => {
  dialogVisible.value = true;
  formData.id = row.id;
  formData.bankName = row.bankName;
  formData.mode = row.mode;

  formData.queryInterval = row.queryInterval;
  formData.queryDelayTime = row.queryDelayTime;
  formData.queryWaitingTime = row.queryWaitingTime;

  formData.tradeInterval = row.tradeInterval;
  formData.tradeDelayTime = row.tradeDelayTime;
  formData.tradeWaitingTime = row.tradeWaitingTime;

  formData.interval = row.interval;
  formData.intervalTime = row.intervalTime;

};

// 新增
const save = () => {
  dialogVisible.value = true;
}

// 清楚form表单数据
const emptyData = () => {
  dialogVisible.value = false;

  formData.id = '';
  formData.bankName = '';
  formData.mode = 4;

  formData.queryInterval = 0;
  formData.queryDelayTime = 0;
  formData.queryWaitingTime = 0;

  formData.tradeInterval = 0;
  formData.tradeDelayTime = 0;
  formData.tradeWaitingTime = 0;

  formData.interval = 0;
  formData.intervalTime = 0;
}

// 保存
const submit = () => {
  request({
    url: "/bank/config/saveUpdate",
    method: "post",
    data: formData,
    headers: {}
  }).then((res) => {
    if (res.status === 200) {
      let data = res.data;
      if (data.code === 10000) {
        ElMessage({
          message: '保存成功.',
          type: 'success',
        })
        emptyData();
        loadTableData();
      } else {
        ElMessage({
          message: data.msg,
          type: 'error',
        })
      }
    }
  })
};

// 搜索
const handleSearch = (e) => {
  e.target.blur();
  loadTableData();
};

// 修改分页
const onTableCurrentChange = (val) => {
  page.current = val;
  loadTableData();
};
const handleSizeChange = (val) => {
  page.limit = val;
  page.current = 1;
  loadTableData();
}
// 查询表格数据
const loadTableData = () => {
  tableLoading.value = true;

  request({
    url: "/bank/config/list",
    method: "post",
    data: {
      "pageNumber": page.current,
      "pageSize": page.limit,
      "query": searchText.value,
    }
  }).then((res) => {
    if (res.status === 200) {
      let data = res.data;
      page.current = data.page;
      page.total = data.total;
      page.list = data.list;
    }
  }).finally(() => {
    tableLoading.value = false;
  });

};

const findBankCode = () => {
  request({
    url: "/bank/getBankCode",
    method: "get"
  }).then((res) => {
    if (res.status === 200) {
      let data = res.data;
      bankCodeList.value = data.data
    }
  })
}

// 页面挂载
onMounted(() => {
  loadTableData();

  findBankCode();

});
</script>
<style scoped>
.page {
  width: calc(100% - var(--ba-main-space) - var(--ba-main-space));
  padding: 16px;
  background: #ffffff;
}

.page-button {
  padding: 16px 16px 16px 0;
}
</style>
